import React, { useState, useEffect } from 'react';
import Breadcrumb from 'components/common/Breadcrumb';
import './index.less';
import Area from 'components/Area';
import { Form, Switch, InputNumber, Button, Select, TimePicker, Card, DatePicker } from 'antd';
import { getLiftingSettingByArea, ILiftingSetting } from 'api/LiftingSetting';
import moment from 'moment';
const { Item } = Form;
const { Option } = Select;
const { RangePicker }: { RangePicker: any } = TimePicker;
const formItemLayout = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 },
};
const FuncSetting = () => {
    const [selectedArea, setSelectedArea] = useState(-1);
    const [areaSettingInfo, setAreaSettingInfo] = useState<ILiftingSetting>();
    /** 表单初始化 */
    const [form] = Form.useForm();
    useEffect(() => {
        if (selectedArea === -1) return;
        getLiftingSettingByArea({ areaId: selectedArea }).then((res) => {
            console.log(res);
            (res as any).formatTime = moment(res.controlClock, 'mm:ss')
            setAreaSettingInfo(res);
            form.resetFields()
        });
    }, [selectedArea]);
    return (
        <div className="func-setting">
            <Breadcrumb crumbs={['路桩配置', '功能设置']}></Breadcrumb>
            <div className="flex">
                <Area selectedArea={selectedArea} setSelectedArea={setSelectedArea}></Area>
                <Card className="func-setting-right" hoverable>
                    <Form {...formItemLayout} form={form} initialValues={areaSettingInfo}>
                        <Item label="红外线碰撞" name="infraredFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="异常碰撞报警" name="collisionFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="升降到位监测" name="inplaceFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="LED灯带" name="ledFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="LED规则设置">
                            <Item name="" noStyle>
                                <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                                    <Option value="1">24h常亮</Option>
                                    <Option value="2">上升&下降闪烁</Option>
                                    <Option value="3">自定义时间</Option>
                                </Select>
                            </Item>
                            <Item noStyle>
                                <RangePicker className="ml20" />
                            </Item>
                        </Item>
                        <Item label="蜂鸣器规则设置">
                            <Select placeholder="请选择" style={{ width: 200 }} allowClear>
                                <Option value="1">上升蜂鸣响</Option>
                                <Option value="2">下降蜂鸣响</Option>
                                <Option value="3">上升&下降蜂鸣响</Option>
                                <Option value="4">关闭</Option>
                            </Select>
                        </Item>
                        <Item label="运行电压检测" name="voltageFlag" valuePropName="checked">
                            <Switch />
                        </Item>
                        <Item label="上升时间">
                            <Item name="riseTime" noStyle>
                                <InputNumber min={0} max={10} />
                            </Item>
                            <span className="ml10">秒</span>
                        </Item>
                        <Item label="下降时间">
                            <Item name="downTime" noStyle>
                                <InputNumber min={0} max={10} />
                            </Item>
                            <span className="ml10">秒</span>
                        </Item>
                        <Item label="控制箱时钟校对">
                            <Item noStyle>
                                <TimePicker />
                            </Item>
                            <Item noStyle name="formatTime">
                                <TimePicker className="ml20" disabled/>
                            </Item>
                        </Item>
                        <Item wrapperCol={{ span: 12, offset: 6 }}>
                            <Button type="primary">保存修改</Button>
                        </Item>
                    </Form>
                </Card>
            </div>
        </div>
    );
};
export default FuncSetting;
